<template>
  <div style="overflow: hiden;" v-loading="formLoading">
    <div style="height: 50px;padding-top:20px">
      <span style="float: left;font-size: 14px;"><em style="color: red;font-style: normal;">tips：</em>建议友商链接的尺寸大小为(宽190*高100);序号越大越靠前;最多9个友商链接</span>
      <el-button v-if="permission == 3" style="float: right;" type="primary" @click="linkToCreate">添加图片</el-button>
    </div>
    <el-table :data="tableData" :header-row-style="{'font-family': 'PingFangSC-Semibold','backgroundColor': '#f5f7fa','color':'#5c6065'}" row-key="id" fit highlight-current-row class="c-width100 color-222 family-PingFangSC-Regular font-s12">
      <el-table-column align="center" label="排序" width="100">
        <template slot-scope="scope">
          <span>{{scope.row.sort}}</span>
        </template>
      </el-table-column>
      <el-table-column width="450" align="center" label="链接">
        <template slot-scope="scope">
          <span>{{scope.row.link}}</span>
        </template>
      </el-table-column>
      <el-table-column width="300" align="center" label="图片">
        <template slot-scope="scope">
          <img :src="scope.row.url" width="200" height="100"/>
        </template>
      </el-table-column>
      <el-table-column align="center" width="150" label="操作" v-if="permission == 3">
        <template slot-scope="scope">
          <b @click="linkToEdit(scope.row.imageId)">编辑</b>
          <span class="color-409">|</span>
          <b @click="deletePic(scope.$index, scope.row.imageId)">删除</b>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import { getImageList, delImage } from '@/api/systemManage'
  import { shopManage_systemManage } from '@/utils/permission'
  export default {
    data() {
      return {
      	formLoading: false,
        permission: 3,
        tableData: []
      }
    },
    created() {
      this.getModelPermission()
      this.initList()
    },
    methods: {
      getModelPermission() {
        this.permission = shopManage_systemManage()
      },
      initList() {
        getImageList({type: 2}).then(res => {
          this.tableData = res.data.data
        }).catch(err => {
          console.log(err)
        })
      },
      deletePic(index, id) {
        this.$confirm('确定删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.formLoading = true;
          delImage(id).then(res => {
          	this.formLoading = false;
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.tableData.splice(index, 1)
          }).catch(err => {
            this.formLoading = false;
            console.log(err)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      },
      linkToEdit(id) {
        this.$router.push({path: `/shopManage/editFriendLink/${id}`})
      },
      linkToCreate() {
        if (this.tableData.length <= 9) {
          this.$router.push({path: `/shopManage/createFriendLink`})
        } else {
          this.$message({
            type: 'warning',
            message: '最多9个友商链接'
          })
        }
      }
    }
  }
</script>
